<template>
<banner class="my-skills" :src="require('@/assets/images/1.jpg')">
    <section-title>
        <h3>专 业 技 能</h3>
        <p>Technical Skills</p>
    </section-title>

    <div class="section-box">
        <svgcircle class="svgcircle" v-for="item in data" :key="item.id" :rate="item.percentage" :name="item.name" :size="svgcircleSize" :textSize="svgcircleTextSize" minBgColor="#435b85" strokeBgColor="rgba(255, 255, 255, 0.1)" stroke-color="#fff"></svgcircle>
    </div>
</banner>
</template>

<script>
import Banner from "@/components/banner";
import sectionTitle from "@/components/section-title";
import svgcircle from "@/components/svgcircle";
import {
    fetchSkills
} from "../api";
export default {
    name: "MySkills",
    data() {
        return {
            svgcircleSize: "50",
            svgcircleTextSize: "14",
            data: [],
        };
    },
    components: {
        Banner,
        sectionTitle,
        svgcircle,
    },
    methods: {
        fetchSkills() {
            fetchSkills()
                .then((res) => {
                    this.data = res.data || [];
                })
                .catch((err) => {
                    console.log(err);
                });
        },
    },
    mounted() {
        this.fetchSkills();
    },
};
</script>

<style lang="less" scoped>
.my-skills {
    h1.section-title {
        color: #fff;
        border-bottom: none;

        h3 {
            color: #fff;
        }
    }

    .section-box {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        margin-top: 10px;

        .svgcircle {
            flex: 0 0 25%;
            margin-top: 10px;
            padding-right: 10px;
        }
    }
}
</style>
